/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div>
    <mt-actionsheet :actions="getSelectAction(data)" v-model="modalVis"></mt-actionsheet>
    <div class="select" ref="btn16" @click="modalVis = true">
      <div class="label requied">{{data.name}}</div>
      <div v-bind:class="{value: true, default: result}">
        <span class="text">{{selectedLabel}}</span>
        <i class="iconfont icon-close-cir default" v-on:click.stop="result = ''" v-show="result"></i>
        <i class="iconfont icon-previewright default"  v-show="!result"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { Actionsheet } from "mint-ui";
export default {
  props: {
    data: Object || Array
  },
  data() {
    return {
      modalVis: false,
      result: "",
      key: ""
    };
  },
  computed:{
    selectedLabel: function(){
      const self = this;
      if(self.result && self.data){
        return self.data.data.filter(item => item.value === self.result)[0].label;
      }
      return '';
    }
  },
  watch: {
    result: function(data){
      console.log('result', data)
    }
  },
  methods: {
    getSelectAction(item) {
      const self = this;
      const data = item.data;
      let result = data.map(j => ({
        name: j.label,
        method: () => (self.result = j.value)
      }));
      return result;
    }
  },
  mounted() {
    const props = this.props;
    this.key = this.data.model;
  },
  components: {
    "mt-actionsheet": Actionsheet
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.select {
  background: #fff;
  display: flex;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 26px;
}
.label {
  flex: 1;
  text-align: left;
}

.value {
  flex: 1;
  text-align: right;
}
.default {
  color:  @font-secondary;
}
</style>
